<template>
  <div class="skeleton-item">
    <div class="skeleton-img"></div>
    <div class="skeleton-text name"></div>
    <div class="skeleton-text desc"></div>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
.skeleton-item {
  width: 306px;
  height: 406px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: pulse 1.5s infinite;

  .skeleton-img {
    width: 306px;
    height: 306px;
    background-color: #e0e0e0;
    border-radius: 4px;
  }

  .skeleton-text {
    margin-top: 12px;
    height: 22px;
    width: 70%;
    background-color: #e0e0e0;
    border-radius: 4px;

    &.desc {
      height: 18px;
      width: 50%;
      margin-top: 6px;
    }
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
